<template>
  <div>
    <el-container class="right">
      <el-header class="head">
        <!-- <div class="icon"> -->
        <el-badge :value="value1" class="item">
          <el-image :src="imgSrc.src1" alt="" style="width: 30px; height: 30px" />
        </el-badge>
        <!-- </div> -->
        <!-- <div class="icon"> -->
        <el-badge value="new" class="item">
          <router-link to="/main/advice">
            <el-image :src="imgSrc.src2" alt="" style="width: 30px; height: 30px" />
          </router-link>


        </el-badge>
        <!-- </div> -->
        <el-badge :value="message" class="item">
          <!-- <div class="icon"> -->
          <router-link to="/main/process">
            <el-image :src="imgSrc.src3" alt="" style="width: 30px; height: 30px" />
          </router-link>

          <!-- </div> -->
        </el-badge>

        <div class="right-item">
          <div class="right-ava">
            <!-- <el-dropdown @command="handleCommand"> -->
            <el-dropdown @click.native="handleCommand">
              <!-- <el-dropdown > -->
              <el-avatar class="user_img" :size="40" :src="imgSrc.src4"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="exit">安全退出</el-dropdown-item>
                <!-- <el-dropdown-item @click="open"> -->
                <el-dropdown-item @click.native="dialogFormVisible = true">
                  <!-- <router-link :to="{name:'pwd'}">修改密码</router-link> -->
                  修改密码
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 修改密码的模态框 -->
            <el-dialog title="修改密码" :visible.sync="dialogFormVisible" class="pwd_dialog">
              <el-form :model="query">
                <el-form-item label="旧密码">
                  <el-input placeholder="请输入旧密码" v-model="query.oldPaw" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input placeholder="请输入新密码" v-model="query.newPaw" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input placeholder="请重新输入密码" v-model="query.renewPaw" @blur="checkpwd_same" clearable
                    show-password></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="success" @click="resetpassword">修改密码</el-button>
              </div>
            </el-dialog>
            <p>{{ loginUser.userName }}</p>
          </div>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations: mapuserinfomutation, mapState: mapuserinfostate } =
  createNamespacedHelpers("userinfo");
export default {
  data() {
    return {
      imgSrc: {
        src1: require("@/assets/search.png"),
        src2: require("@/assets/message.png"),
        src3: require("@/assets/ring.png"),
        src4:require("../../assets/11.jpg"),
        // src4:JSON.parse(window.localStorage.getItem("usersinfo")),
      },
      flag: false,
      dialogFormVisible: false,
      query: {
        newPaw: "",
        oldPaw: "",
        renewPaw: "",
        userId: "",
      },
      value1: "",
      value2: "",
      value3: "",

    };
  },
  methods: {
    exit() {
      console.log("exit");
      this.dialogFormVisible = false;
      localStorage.clear()
      this.$router.push('/home')
      // Window.location.reload()
    },
    handleCommand() {
      console.log(222222);
      this.dialogFormVisible = true;
    },
    checkpwd_same() {
      if (this.query.newPaw != this.query.renewPaw) {
        this.$message.success("两次密码不一样，请重新输入");
      } else {
        this.flag = true;
      }
    },
    async resetpassword() {
      console.log(this.flag);
      this.dialogFormVisible = false;
      if (this.flag) {
        console.log(this.loginUser.userId);
        this.query.userId = this.loginUser.userId;
        console.log("mess", this.query);
        const res = await this.$api.user.resetpwd(this.query);
        console.log(res);
        this.$message.success(res.message);
      }
    },
  },
  computed: {
    ...mapuserinfostate(["loginUser"]),
    ...mapuserinfostate(["message"]),
  },
  mounted() {
    this.value3 = this.message
  }
};
</script>

<style lang="scss" scoped>
.el-form {
  width: 20vw;
}

.el-input {
  width: 15.625vw;
}

.el-dialog {
  width: 15.625vw !important;
  position: absolute !important;
  left: 500px !important;
  top: 200px !important;
  margin: 0px !important;
}

body {
  margin: 0px;
  padding: 0px;
  font-size: 0.885vw;
}

* {
  box-sizing: border-box;
}

.item {
  height: 1vw;
  margin-top: 1.0417vw;
  width: 2vw;
  margin-right: 2.0833vw;
}

.head {
  padding: 0 !important;
  box-sizing: border-box;
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  // align-items: center;
  width: 100%;
  // background-color: hsla(0, 0%, 100%, 0.8);
  // backdrop-filter: blur(0.26vw) brightness(0.8);
  height: 5.208vw;
  //  box-shadow: 10px 5px 5px #e0e5ec;
  // background-color: green;
}

.nav {
  font-size: inherit;
  // margin-left: 67.708vw;
  // margin-top: -2.604vw;
  color: rgb(155, 143, 143);
}

.user_img {
  cursor: pointer;
}

.right-ava {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.6vw;
  margin-left: 1vw;
  // border:1px solid green ;
}

.right-ava p {
  margin-left: 1vw;
  width: 4vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.right-item {
  width: 10vw;
}

.icon {
  display: flex;
  margin-top: 0.6vw;
  width: 4vw;
  justify-content: center;
  height: 2vw;
  line-height: 3vw;
  align-items: center;
}

element.style {
  left: 1468px !important;
}
</style>